
<template>
<div id="mCom" class="mCom">
    <div class="container">
        <div class="dataSourceTree">
          <div style="margin-bottom: 10px;">
            <el-input v-model="search" @input="handleSearch" placeholder="输入表名" clearable></el-input>
          </div>
          <div class="dataBox">
            <div style="width:30%;height:800px;background: #ffff;padding: 10px;box-sizing: border-box;overflow: auto;overflow-y:auto">
            <h5 style="text-align:center;margin: 10px;">数据库</h5>
            <el-tree highlight-current :data="sourceDataList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </div>
          <div style="flex:1;height:800px;background: #ffff;overflow: auto;display:flex">
             <div v-if="dbType=='postgresql'" style="flex:1;height:800px;background: #ffff;overflow: auto">
              <h5 style="text-align:center;margin: 10px;">schema</h5>
            <el-tree highlight-current :data="schemaTableList" :props="defaultProps" @node-click="handleNodeDataSchemaClick"></el-tree>
          </div>
          <div style="flex:1;height:800px;background: #ffff;overflow: auto">
          <h5 style="text-align:center;margin: 10px;">表</h5>
            <el-tree highlight-current :data="databaseTableList" :props="defaultProps" @node-click="handleNodeDataBaseClick"></el-tree>
          </div>
          </div>
          </div>
        </div>
        <div class="dataSourceTable">
          <div class="search-box">
        <div class="search">
          <div style="margin-right:20px">
            <span>数据库名：</span>
            <span style="color: #409EFF;">{{rowName}}</span>
          </div>
          <div>
            <span>表名：</span>
            <span style="color: #409EFF;">{{tableName}}</span>
          </div>
        </div>
        <div class="btn">
            <el-button size="medium" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
            <el-button size="medium" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button size="medium" type="primary" icon="el-icon-delete" >删除</el-button>
        </div>
       </div>
       <div style="height:800px;">
        <el-table :header-cell-style="{background:'#eeee'}" height="800" :data="tableData" border :cell-style="{padding: '5px'}">
           <span v-for="item in headerLists" :key="item.prop">
              <el-table-column
                align="center"
                min-width="180"
                :prop="item.name"
                :label="item.name"
              >
              </el-table-column>
            </span>
        </el-table>
        <div class="pagesize">
      <!-- <div id="fy" class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagination.currentPage" :page-sizes="[10, 20, 30, 50]"
        :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
      </div> -->
    </div>
       </div>
        </div>
        
    </div>
</div>
</template>
<script>
import { listData } from "../api/sourceDetail";
export default {
  name: "datasourceDetail",
  data() {
    return {
      // 数据库id
      Id: "",
      // 表数据
      sourceDataList: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 表搜索数据
      search: "",
      dataList: [],
      headerLists: [],
      // 树行点击获取的库名
      rowName: "",
      loading: false,
      pagination: {
        pageSize: 10,
        pageNumber: 1,
        name: ""
      },
      total: 0,
      schemaName: null,
      // 表名称
      databaseTableList: [],
      schemaTableList: [],
      // 获取行表名
      tableName: "",
      tableData: [],
      // 数据类型
      dbType: ""
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (newVal.name !== "datasourceDetail") return;
        this.dbType = "";
        this.Id = newVal.query.id;
        this.dbType = newVal.query.type;
        this.GETSurfaceList();
      }
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      //选择不同页数时触发事件
      this.pagination.pageSize = val; //修改每页条数
      this.getTableList();
    },
    handleCurrentChange(val) {
      //当前页变化时触发事件
      this.pagination.pageNumber = val; //修改当前页
      this.getTableList();
    },
    // 表名搜索
    handleSearch() {
      if (this.rowName == "") return this.$message.error("请先选择数据库名称");
      if (this.search == "") return (this.databaseTableList = []);
      console.log(this.search);
      let that = this;
      if (this.dbType == "postgresql") {
        if (that.schemaName == "" || that.schemaName == null) {
          return this.$message.error("请先选择schema名称");
        }
        this.$.ajax({
          url:
            that.$store.state.global.httpServer +
            "/api/datasource/getDataTableListByName/" +
            that.Id +
            "/" +
            that.schemaName +
            "/" +
            that.rowName +
            "/" +
            this.search,
          method: "get",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          beforeSend: function(xhr) {
            xhr.setRequestHeader("accessToken", localStorage.accessToken);
          },
          success: function(data) {
            console.log(
              "%c 🍗 data: ",
              "font-size:20px;background-color: #42b983;color:#fff;",
              data
            );
            if (data.status == "SUCCESS") {
              // that.$notify({
              //   title: "成功",
              //   message: data.message,
              //   type: "success"
              // });
              that.databaseTableList = data.data;
              //完成创建，取消弹出框，刷新列表
              // that.$store.dispatch("getMenuDatabaseList");
            } else if (data.status == "FAIL") {
              that.$notify.error({
                title: "失败",
                message: data.message
              });
            }
          },
          error: function(response) {
            that.$store.commit("dealRequestError", response);
          }
        });
      } else {
        this.$.ajax({
          url:
            that.$store.state.global.httpServer +
            "/api/datasource/getDataTableListByName/" +
            that.Id +
            "/" +
            that.rowName +
            "/" +
            this.search,
          method: "get",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          beforeSend: function(xhr) {
            xhr.setRequestHeader("accessToken", localStorage.accessToken);
          },
          success: function(data) {
            console.log(
              "%c 🍗 data: ",
              "font-size:20px;background-color: #42b983;color:#fff;",
              data
            );
            if (data.status == "SUCCESS") {
              // that.$notify({
              //   title: "成功",
              //   message: data.message,
              //   type: "success"
              // });
              that.databaseTableList = data.data;
              //完成创建，取消弹出框，刷新列表
              // that.$store.dispatch("getMenuDatabaseList");
            } else if (data.status == "FAIL") {
              that.$notify.error({
                title: "失败",
                message: data.message
              });
            }
          },
          error: function(response) {
            that.$store.commit("dealRequestError", response);
          }
        });
      }
    },
    // 树行点击
    handleNodeClick(data) {
      this.rowName = data.name;
      this.tableName = "";
      if (this.dbType == "postgresql") {
        let that = this;
        this.$.ajax({
          url:
            that.$store.state.global.httpServer +
            "/api/datasource/getDataSchemaList/" +
            that.Id +
            "/" +
            that.rowName,
          method: "get",
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          beforeSend: function(xhr) {
            xhr.setRequestHeader("accessToken", localStorage.accessToken);
          },
          success: function(data) {
            console.log(
              "%c 🍗 data: ",
              "font-size:20px;background-color: #42b983;color:#fff;",
              data
            );
            if (data.status == "SUCCESS") {
              // that.$notify({
              //   title: "成功",
              //   message: data.message,
              //   type: "success"
              // });
              that.schemaTableList = data.data;
              //完成创建，取消弹出框，刷新列表
              // that.$store.dispatch("getMenuDatabaseList");
            } else if (data.status == "FAIL") {
              that.$notify.error({
                title: "失败",
                message: data.message
              });
            }
          },
          error: function(response) {
            that.$store.commit("dealRequestError", response);
          }
        });
      } else {
        this.getDatabaseTableList();
      }
    },
    // Schema数据点击
    handleNodeDataSchemaClick(data) {
      this.schemaName = data.name;
      let that = this;
      this.$.ajax({
        url:
          that.$store.state.global.httpServer +
          "/api/datasource/getDataTableList/" +
          that.Id +
          "/" +
          data.name +
          "/" +
          this.rowName,
        method: "get",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr) {
          xhr.setRequestHeader("accessToken", localStorage.accessToken);
        },
        success: function(data) {
          if (data.status == "SUCCESS") {
            // that.$notify({
            //   title: "成功",
            //   message: data.message,
            //   type: "success"
            // });
            that.databaseTableList = data.data;
            //完成创建，取消弹出框，刷新列表
            // that.$store.dispatch("getMenuDatabaseList");
          } else if (data.status == "FAIL") {
            that.$notify.error({
              title: "失败",
              message: data.message
            });
          }
        },
        error: function(response) {
          that.$store.commit("dealRequestError", response);
        }
      });
    },
    // 表数据点击
    handleNodeDataBaseClick(data) {
      this.tableName = data.name;
      this.getTableList();
    },
    // 获取数据库表数据
    getDatabaseTableList() {
      let that = this;
      this.$.ajax({
        url:
          that.$store.state.global.httpServer +
          "/api/datasource/getDataTableList/" +
          that.Id +
          "/" +
          that.rowName,
        method: "get",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr) {
          xhr.setRequestHeader("accessToken", localStorage.accessToken);
        },
        success: function(data) {
          if (data.status == "SUCCESS") {
            // that.$notify({
            //   title: "成功",
            //   message: data.message,
            //   type: "success"
            // });
            that.databaseTableList = data.data;
            //完成创建，取消弹出框，刷新列表
            // that.$store.dispatch("getMenuDatabaseList");
          } else if (data.status == "FAIL") {
            that.$notify.error({
              title: "失败",
              message: data.message
            });
          }
        },
        error: function(response) {
          that.$store.commit("dealRequestError", response);
        }
      });
    },
    // 获取表格数据
    getTableList() {
      const data = {
        id: this.Id,
        dbName: this.rowName,
        tableName: this.tableName,
        schemaName: this.schemaName,
        ...this.pagination
      };
      this.loading = true;
      listData(data)
        .then(res => {
          console.log(
            "%c 🍼️ res: ",
            "font-size:20px;background-color: #2EAFB0;color:#fff;",
            res
          );
          this.loading = false;
          this.tableData = res.data.data;
          this.headerLists = res.data.columns;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 获取库数据
    GETSurfaceList() {
      let that = this;
      console.log(that.dbType);
      this.$.ajax({
        url:
          that.$store.state.global.httpServer +
          "/api/datasource/getDataBasesList/" +
          that.Id,
        method: "get",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr) {
          xhr.setRequestHeader("accessToken", localStorage.accessToken);
        },
        success: function(data) {
          if (data.status == "SUCCESS") {
            // that.$notify({
            //   title: "成功",
            //   message: data.message,
            //   type: "success"
            // });
            that.sourceDataList = data.data;
            //完成创建，取消弹出框，刷新列表
            // that.$store.dispatch("getMenuDatabaseList");
          } else if (data.status == "FAIL") {
            that.$notify.error({
              title: "失败",
              message: data.message
            });
          }
        },
        error: function(response) {
          that.$store.commit("dealRequestError", response);
        }
      });
    }
  }
};
</script>
<style scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.dataSourceTree {
  width: 30%;
}
.dataSourceTable {
  width: 68%;
  padding: 0 15px;
}
.container .search-box {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.container .search-box .search {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
.container .dataSourceTree .dataBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
